<template>
	<view style="background-color:#F7F7F7 ;">
		<view class="device-list">
			<view class="top-box">
				<view class="input-search">
					<input type="text" placeholder="搜索设备编号" v-model="keywords" />
					<image src="../../static/images/home/切片@2x.png" @click="getDataList"></image>
				</view>
				<view class="select-box">
					<view class="select-flex">
						<uni-data-select type="line" v-model="type" :localdata="selectList"
							@change="onChange"></uni-data-select>
					</view>
					<view class="select-flex">
						<uni-data-select type="line" v-model="yj_status" :localdata="selectListStatus"
							@change="onChangeStatus"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="device-list-box" v-if="datalist && datalist.length > 0">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">
							编号：{{ item.name }}

						</view>
						<view class="item-top-right">
							<!-- <image src="../../static/images/home/形状2@3x.png" mode="" class="icon-power" v-if="item.powerStatus === '0'"></image>
							<image src="../../static/images/home/形状3@3x.png" mode="" class="icon-power" v-else></image>
							 -->
							<view class="progress-box">
								<progress style="height:12px; width:26px;border: 1px solid #25AB64;border-radius:3px"
									:percent="item.ele" stroke-width="10" activeColor="#25AB64" backgroundColor="none"
									v-if="item.ele>50" />
								<progress style="height:12px; width:26px;border: 1px solid #FF950A;border-radius:3px"
									:percent="item.ele" stroke-width="10" activeColor="#FF950A" backgroundColor="none"
									v-else />
							</view>
							<text :style="item.ele>50?'color:#25AB64;':'color:#FF950A;'">{{item.ele }}%</text>
							<!-- <image src="../../static/images/home/形状@3x.png" mode="" class="icon-tip" v-if="item.powerStatus === '0'">
							</image>
							<image src="../../static/images/home/形状1@3x.png" mode="" class="icon-tip" v-else></image> -->
						</view>
					</view>
					<view>
						<text class="status">{{ getDeviceStatus(item.type) }}</text>
						<text class="status">{{ getDeviceYJStatus(item.yj_status) }}</text>
					</view>
					<view class="deviceContent">
						<image src="../../static/images/home/332325341备份 3@2x.png"></image>
						<view class="item-info">
							<view class="t0">
								{{ item.ground?.name }}
							</view>
							<view class="t1">
								心跳时间：
								{{timestampToTime(item.panttime)}}
							</view>
							<view class="t2">启用状态：{{ item.status == 'normal' ? '启用' : '禁用' }}</view>
						</view>
					</view>
					<view class="deviceBottom">
						<view class="bottom-left" v-if="userinfo.type==1">分佣账户：{{ getAgency(item.child) }}</view>
						<view class="bottom-left" v-if="userinfo.type!=1"></view>
						<view class="bottom-right" @click="showQRCode(item)">
							<text>点击扫码</text>
							<image src="../../static/images/home/形状@2x.png" mode=""></image>
						</view>
					</view>
					<view class="btns">
						<button class="btn-green" @click="startDevice(item)">设备控制</button>
						<button class="btn-yellow"
							@click="disableDev(item)">{{item.status=='hidden'?'启用':'禁用'}}</button>
						<button class="btn-red" @click="delDevice(item)"
							v-if="userinfo.user_id==item.user_id">撤机</button>
					</view>
				</view>
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
		</view>
		<view class="device-Using" v-if="isshowUsing">
			<view class="using-box">
				<view class="t0">设备二维码</view>
				<view class="t1">
					<uv-qrcode ref="qrcode" :value="deviceCode" :options="qrcode" class="image"></uv-qrcode>
				</view>
				<view class="info">
					<view class="info-t0">长按识别二维码</view>
					<view class="info-t1">{{device.name}}</view>
					<view class="info-t2">所属场地：{{device.ground?.name}}</view>
				</view>
			</view>
			<view class="close" @click="this.isshowUsing = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
	</view>
	<!-- 弹出层 -->
	<uni-popup ref="popup" @maskClick="maskClick">
		<view class="popup-content">
			<!-- 选择项 -->
			<view class="choice-item" v-for="(item, index) in choices" :key="index" @click="makeChoice(item)">
				{{ item.name }}
			</view>
			<button @click="maskClick">取消</button>
		</view>
	</uni-popup>
	<!-- 设置出泡泡时间 -->
	<view class="device-start" v-if="cppShow">
		<view class="start-box">
			<view class="t0">设置出泡泡</view>
			<uni-forms ref="dynamicForm" :rules="cppRules" :model="cppFormData" label-width="100px">
				<uni-forms-item label="设备编号">{{ cppFormData.name }}</uni-forms-item>
				<uni-forms-item label="出泡时间(秒)" required name="cpp">
					<uni-easyinput v-model="cppFormData.cpp" placeholder="请输入出泡时间" />
				</uni-forms-item>
			</uni-forms>
			<button size="mini" @click="setCpp('dynamicForm')" class="btn">提交</button>
		</view>
		<view class="close" @click="cppShow = false">
			<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
		</view>
	</view>
	<!-- 待机引流 -->
	<view class="device-start" v-if="djylShow">
		<view class="start-box djyl-bg">
			<view class="t0">待机引流</view>
			<uni-forms :model="djylFormData" label-width="80px">
				<uni-forms-item label="设备编号">{{ djylFormData.name }}</uni-forms-item>
				<uni-forms-item label="引流时段">
					<view @click="selectStartTime" style="flex: 1;">{{djylFormData.yl_timed?djylFormData.yl_timed:'开始'}}
					</view>
					<uv-datetime-picker ref="startTimePicker" v-model="djylFormData.yl_timed" mode="time"
						@confirm="setStartTime">
					</uv-datetime-picker>
					<view style="color: #B0B0B0;font-size: 24rpx;flex: 1;">至</view>
					<view @click="selectEndTime" style="flex: 1;">
						{{djylFormData.yl_time_end?djylFormData.yl_time_end:'结束'}}
					</view>
					<uv-datetime-picker ref="endTimePicker" v-model="djylFormData.yl_time_end" mode="time"
						@confirm="setEndTime">
					</uv-datetime-picker>
				</uni-forms-item>
				<uni-forms-item label="待机间隔">
					<uv-input :clearable="false" type="number" v-model="djylFormData.yl_djjg" border="none"></uv-input>
					<view style="color: #B0B0B0;font-size: 24rpx;margin-right: 20rpx;">秒出泡泡</view>
					<uv-input :clearable="false" type="number" v-model="djylFormData.yl_cpp" border="none"></uv-input>
					<view style="color: #B0B0B0;font-size: 24rpx;">秒</view>
				</uni-forms-item>
				<!-- 		<uni-forms-item label="引流开关" required name="yl_kg">
						<switch :checked="djylFormData.yl_kg" color="#2F9AFE" />
					</uni-forms-item> -->
			</uni-forms>
			<view class="remark-tip">
				待机间隔:场地内设备最后订单时间到"待机间隔”。无效引流50次后引流终止。待消费或重设可重新开启引流。
			</view>
			<button size="mini" @click="setYl" class="btn">提交</button>
		</view>
		<view class="close" @click="djylShow = false">
			<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
		</view>
	</view>
	<!-- 音量控制 -->
	<view class="device-start" v-if="volumeShow">
		<view class="start-box">
			<view class="t0">音量控制</view>
			<uni-forms ref="volumeForm" :rules="volumeFormRules" :model="volumeFormData" label-width="90px">
				<uni-forms-item label="设备编号" name="name" required>{{ volumeFormData.name }}</uni-forms-item>
				<uni-forms-item label="设备音量" required name="yinliang">
					<uni-easyinput v-model="volumeFormData.yinliang" placeholder="请输入音量" />
				</uni-forms-item>
			</uni-forms>
			<button size="mini" @click="setVol('volumeForm')" class="btn">提交</button>
		</view>
		<view class="close" @click="volumeShow = false">
			<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
		</view>
	</view>
	<!-- 灯光控制 -->
	<view class="device-start" v-if="lightShow">
		<view class="start-box">
			<view class="t0">灯光控制</view>
			<uni-forms ref="lightForm" :rules="lightFormRules" :model="lightFormData" label-width="90px">
				<uni-forms-item label="设备编号" name="name" required>{{ lightFormData.name }}</uni-forms-item>
				<uni-forms-item label="开启时间" required name="dg_start">
					<picker class="time_picker" mode="time" start="00:00" end="23:59" :value="lightFormData.dg_start"
						@change="setLigthStart">
						<input placeholder="请选择开启时间" name="input" v-model="lightFormData.dg_start" disabled />
						<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="关闭时间" required name="dg_end">
					<!-- <uni-easyinput v-model="lightFormData.dg_end" placeholder="灯光结束时间" /> -->
					<picker class="time_picker" placeholder="灯光结束时间" mode="time" start="00:00" end="23:59"
						:value="lightFormData.dg_end" @change="setLigthEnd">
						<input placeholder="请选择关闭时间" name="input" v-model="lightFormData.dg_end" disabled />
						<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
						<!-- <view>{{lightFormData.dg_end}}</view> -->
					</picker>
				</uni-forms-item>
			</uni-forms>
			<button size="mini" @click="setLight('lightForm')" class="btn">提交</button>
		</view>
		<view class="close" @click="lightShow = false">
			<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js';
	export default {
		data() {
			return {
				keywords: '',
				type: '',
				isshowUsing: false,
				selectList: [{
						value: '',
						text: '全部设备',
						isDefault: false
					},
					{
						value: 'online',
						text: '在线',
						isDefault: true
					},
					{
						value: 'offline',
						text: '离线',
						isDefault: false
					},
					// {
					// 	value: 'water_warning',
					// 	text: '水位过低预警',
					// 	isDefault: false
					// },
					// {
					// 	value: 'ele_warning',
					// 	text: '电量过低预警',
					// 	isDefault: false
					// },
					// {
					// 	value: 'all_faults',
					// 	text: '所有故障',
					// 	isDefault: false
					// }
				],
				yj_status: '',
				selectListStatus: [{
						value: '',
						text: '全部',
						isDefault: false
					}, {
						value: '0',
						text: '正常',
						isDefault: false
					},
					{
						value: '1',
						text: '水位过低预警',
						isDefault: true
					},
					{
						value: '2',
						text: '电压过低预警',
						isDefault: false
					},
					{
						value: '3',
						text: '故障',
						isDefault: false
					}
				],
				areaId: null,
				datalist: [],
				cppShow: false,
				// 数据源
				cppFormData: {
					id: '',
					name: '',
				},
				// 规则
				cppRules: {
					cpp: {
						rules: [{
							required: true,
							errorMessage: '出泡时间不能为空'
						}]
					}
				},
				choices: [{
						id: 5,
						name: '出泡泡'
					}, {
						id: 1,
						name: '待机引流'
					},
					{
						id: 2,
						name: '彩灯开'
					},
					{
						id: 7,
						name: '彩灯关'
					},
					{
						id: 3,
						name: '音量控制'
					},
					{
						id: 4,
						name: '灯光控制'
					}
				],
				djylShow: false, //待机引流
				// 待机引流数据源
				djylFormData: {
					id: '',
					name: '',
					yl_timed: '',
					yl_time_end: '', //引流结束时间
					yl_djjg: 0, // 时间间隔
					yl_cpp: 0, // 出泡泡时间 
					yl_kg: true

				},
				// 规则
				volumeShow: false, //音量控制
				// 声音数据源
				volumeFormData: {
					id: '',
					name: '',
					yinliang: ''
				},
				// 规则
				volumeFormRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '场所名称不能为空'
						}]
					},
					yinliang: {
						rules: [{
							required: true,
							errorMessage: '音量不能为空'
						}]
					}
				},
				lightShow: false, //灯光控制
				// 灯光数据源
				lightFormData: {
					id: '',
					name: '',
					dg_start: '',
					dg_end: ''
				},
				// 规则
				lightFormRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '场所名称不能为空'
						}]
					},
					dg_start: {
						rules: [{
							required: true,
							errorMessage: '灯光开始时间不能为空'
						}]
					},
					dg_end: {
						rules: [{
							required: true,
							errorMessage: '灯光结束时间不能为空'
						}]
					}
				},
				currentObj: {},
				qrcode: {
					size: 300,
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 2,
					areaColor: "#000000",
					backgroundColor: "#ffffff",
				},
				userinfo: null,
				deviceCode: null,
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.areaId = options.id
			}
			if (options && options.type_status) {
				if (options.type_status == 'online' || options.type_status == 'offline') {
					this.type = options.type_status;
				}
				if (options.type_status == 'all_faults') {
					this.yj_status = '3';
				}
			}
		},
		onShow() {
			console.log('on show ...');
			this.getDataList();
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.userinfo = res.data.userinfo;
				});
			},
			timestampToTime(timestamp) {
				let date = new Date(timestamp * 1000);
				let year = date.getFullYear();
				let month = ("0" + (date.getMonth() + 1)).slice(-2);
				let day = ("0" + date.getDate()).slice(-2);
				let hour = ("0" + date.getHours()).slice(-2);
				let minute = ("0" + date.getMinutes()).slice(-2);
				let second = ("0" + date.getSeconds()).slice(-2);
				let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
				return formattedTime;
			},
			/**
			 * 设备列表 todo
			 */
			getDataList() {
				let params = {
					type: this.type,
					yj_status: this.yj_status,
					keywords: this.keywords,
					ground_id: this.areaId
				};
				api.getDeviceList(params).then(res => {
					this.datalist = res.data;
				});
			},
			/**
			 * 代理
			 */
			getAgency(agency) {
				if (agency.length == 0) {
					return '自营';
				} else {
					return agency.map(e => e.nickname).toString();
				}
			},
			/**
			 * 设备状态
			 */
			getDeviceStatus(type) {
				if (type == 'online') {
					return '在线';
				} else if (type == 'offline') {
					return '离线';
				} else {
					return '未知';
				}
				//  else if (type == 'water_warning') {
				// 	return '水位过低预警';
				// } else if (type == 'ele_warning') {
				// 	return '电量过低预警';
				// } else if (type == 'all_faults') {
				// 	return '所有故障';
				// }
			},
			/**
			 * 设备状态
			 */
			getDeviceYJStatus(type) {
				if (type == '0') {
					return '正常';
				} else if (type == '1') {
					return '水位过低预警';
				} else if (type == '2') {
					return '电压过低预警';
				} else if (type == '3') {
					return '所有故障';
				} else {
					return '未知';
				}
			},
			startDevice(item) {
				this.currentObj = item;
				this.$refs.popup.open('bottom');
			},
			/**
			 * 禁用设备
			 */
			disableDev(dev) {
				api.editDevice({
					id: dev.id,
					status: dev.status == 'hidden' ? 'normal' : 'hidden'
				}).then(res => {
					if (res.code) {
						uni.showToast({
							title: dev.status == 'hidden' ? '启用成功' : '禁用成功！',
							icon: "success"
						})
						this.getDataList()
					}
				})
			},
			// 删除设备
			delDevice(dev) {
				api.delDevice({
					id: dev.id
				}).then(res => {
					this.getDataList()
				})
			},
			onChange(event) {
				console.log('选中的值：' + this.type);
				this.getDataList();
			},
			onChangeStatus(event) {
				console.log('选中的值：' + this.yj_status);
				this.getDataList();
			},
			showQRCode(dev) {
				this.device = dev
				this.deviceCode = "https://d-paopao.bigchun.com?sn=" + dev.name
				this.isshowUsing = true

			},
			maskClick() {
				this.$refs.popup.close();
			},
			//选择开始时间
			selectStartTime() {
				this.$refs.startTimePicker.open();
			},
			// 设置引渡开始时间
			setStartTime(e) {
				this.djylFormData.yl_timed = e.value
			},
			//选择结束时间
			selectEndTime() {
				this.$refs.endTimePicker.open();
			},
			// 引流结束时间
			setEndTime(e) {
				this.djylFormData.yl_time_end = e.value
			},
			//更多功能 
			makeChoice(choice) {
				this.maskClick();
				let e = choice.id;
				//出泡泡
				if (e === 5) {
					this.cppFormData = {}
					this.cppFormData.type = 2
					this.cppFormData.name = this.currentObj.name;
					this.cppFormData.id = this.currentObj.id;
					this.cppFormData.cpp = this.currentObj.cpp
					this.cppShow = true;
				}
				//待机引流
				if (e === 1) {
					this.djylFormData = {}
					this.djylFormData.type = 2
					this.djylFormData.name = this.currentObj.name
					this.djylFormData.id = this.currentObj.id
					this.djylFormData.yl_djjg = this.currentObj.yl_djjg
					this.djylFormData.yl_cpp = this.currentObj.yl_cpp
					this.djylFormData.yl_timed = this.currentObj.yl_timed
					this.djylFormData.yl_time_end = this.currentObj.yl_time_end
					this.djylShow = true;
				}
				// 彩灯开
				if (e === 2) {
					let cdFormData = {}
					cdFormData.id = this.currentObj.id
					cdFormData.led_kg = 1
					cdFormData.type = 2
					api.kgCommand(cdFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getDataList();
						}
					})
				}
				// 彩灯关
				if (e === 7) {
					let cdFormData = {}
					cdFormData.id = this.currentObj.id
					cdFormData.led_kg = 0
					cdFormData.type = 2
					api.kgCommand(cdFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getDataList();
						}
					})
				}
				// 音量控制
				if (e === 3) {
					this.volumeFormData = {}
					this.volumeFormData.type = 2
					this.volumeFormData.name = this.currentObj.name
					this.volumeFormData.id = this.currentObj.id
					this.volumeFormData.yinliang = this.currentObj.yinliang
					this.volumeShow = true;

				}
				// 灯光控制
				if (e === 4) {
					this.lightFormData = {}
					this.lightFormData.type = 2
					this.lightFormData.name = this.currentObj.name
					this.lightFormData.id = this.currentObj.id
					this.lightFormData.dg_start = this.currentObj.dg_start
					this.lightFormData.dg_end = this.currentObj.dg_end
					this.lightShow = true;
				}

			},
			// 设置出泡泡
			setCpp(form) {
				this.$refs[form].validate().then(res => {
					api.cppCommand(this.cppFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getDataList();
						}
						this.cppShow = false;
					})
				})
			},
			//  设置引流
			setYl() {
				// this.djylFormData.yl_kg = this.djylFormData.yl_kg ? 1 : 0;
				api.ylGroundCommand(this.djylFormData).then(res => {
					if (res.code === 1) {
						uni.showToast({
							icon: 'success',
							title: "设置成功！"
						})
						this.getDataList();
					}
					// this.ylStartTime = '';
					// this.ylEndTime = '';
					this.djylShow = false;
				})

			},
			//  设置音量
			setVol(form) {
				if (this.volumeFormData.yinliang > 30) {
					return uni.showToast({
						icon: 'none',
						title: "最大音量30"
					})
				}
				this.$refs[form].validate().then(res => {
					api.ylCommand(this.volumeFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getDataList();
						}
						this.volumeShow = false;
					})
				})
			},
			setLigthStart(e) {
				this.lightFormData.dg_start = e.detail.value;
			},
			setLigthEnd(e) {
				this.lightFormData.dg_end = e.detail.value;
			},
			// 设置灯光
			setLight(form) {
				this.$refs[form].validate().then(res => {
					api.dgCommand(this.lightFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getDataList();
						}
						this.lightShow = false;
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-select__input-box {
		.uni-select__input-placeholder {
			color: #ffffff !important;
			font-size: 28rpx;
		}

		.uni-select__input-text {
			color: #ffffff !important;
			font-size: 28rpx;
		}

		.uniui-bottom::before {
			color: #ffffff;
		}
	}

	.device-list {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.input-search {
				position: relative;

				uni-input {
					background: #ffffff;
					box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					margin-right: 40rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.device-list-box {
			.status {
				background: #49a1fd;
				border-radius: 4rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #ffffff;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
				padding: 0 6rpx;
				margin-right: 18rpx;
			}

			.device-list-item {
				background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				border-radius: 14px;
				position: relative;
				margin: 0 -20rpx 20rpx;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-top-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
						display: flex;
						align-items: center;


					}

					.item-top-right {
						display: flex;
						align-items: center;

						.icon-power {
							width: 50rpx;
							height: 28rpx;
						}

						.icon-tip {
							width: 28rpx;
							height: 28rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #25ab64;
							line-height: 40rpx;
							font-style: normal;
							margin: 0 12rpx;
						}
					}
				}

				.deviceContent {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					uni-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.item-info {
						.t0 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #413100;
							line-height: 40rpx;
							font-style: normal;
						}

						.t1 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}

						.t2 {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}
					}
				}

				.deviceBottom {
					border-bottom: 2rpx solid rgba(73, 161, 253, 0.2);
					padding-bottom: 16rpx;
					padding-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom-left {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}

					.bottom-right {
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
						box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
						border-radius: 44rpx;
						padding: 4rpx 16rpx;

						uni-image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 6rpx;
						}

						uni-text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #ffffff;
							line-height: 36rpx;
							font-style: normal;
						}
					}
				}

				.btns {
					display: flex;
					justify-content: end;
					margin-top: 20rpx;

					uni-button {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						padding: 8rpx;
						border-radius: 8rpx;
						margin: 0 0 0 20rpx;

						&.btn-blue {
							background: #49a1fd;
						}

						&.btn-green {
							background: #25ab64;
						}

						&.btn-yellow {
							background: #ff950a;
						}

						&.btn-red {
							background: #f95452;
						}
					}
				}
			}
		}

		.empty-box {
			margin: 0 -10px;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 50rpx;
				display: block;
			}
		}
	}

	.device-Using {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.using-box {
			background: url('../../static/images/home/scan-bg.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 34rpx;

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 44rpx;
				color: #000000;
				line-height: 60rpx;
				font-style: normal;
				padding-top: 40rpx;
			}

			.t1 {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 12rpx;
				margin: 50rpx auto 40rpx;
				width: 200px;
				height: 200px;

				.image {
					width: 200px !important;
					height: 200px !important;
				}

				uni-canvas {
					width: 200px !important;
					height: 200px !important;
				}
			}

			.info {
				.info-t0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 24rpx;
				}

				.info-t1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 18rpx;
				}

				.info-t2 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
				}
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.device-start {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: scroll;

		.start-box {
			background: url('../../static/images/home/编组 19@2x.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 20rpx;
			padding: 0rpx 40rpx 30rpx !important;

			&.djyl-bg {
				background: url('../../static/images/area/编组 19备份 5@2x.png') no-repeat;
				background-size: 100% 130%;
			}

			.t0 {
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 2.2rem;
				font-style: normal;
				padding-top: 10rpx;
			}


			.remark-tip {
				font-size: 24rpx;
				color: #a7a5a5;
				line-height: 34rpx;
				text-align: left;
				padding: 20rpx 0rpx 40rpx;
			}

			.btn {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 44rpx;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				width: 300rpx;
				line-height: 80rpx;
				margin: 30rpx auto 0;
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
</style>